<template>
  <div>
    <div class="w-100 flexLeft echarts-head-1">10天收款</div>
    <div id="main" class="Tmok"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    this.mcat();
  },
  methods: {
    mcat() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "金额",
          padding: [15, 30],
          textStyle: {
            fontSize: 14,
            fontWeight: "100",
          },
        },
        toolbox: {
          right: 20,
          top: 5,
          feature: { saveAsImage: { type: "png" } },
        },
        tooltip: {},
        xAxis: {
          data: [
            "2024-08-11",
            "2024-08-12",
            "2024-08-13",
            "2024-08-14",
            "2024-08-15",
            "2024-08-16",
            "2024-08-17",
          ],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            barWidth: "25%",
            data: [0, 0.2, 0.4, 0.6, 0.8, 1, 0.2],
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style scoped>
.echarts-head-1 {
  border-bottom: 1px solid #ebeef5;
  height: 49px;
  padding-left: 15px;
  font-size: 15px;
}

.Tmok {
  height: 350px;
  //width: 100%;
}
</style>
